<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">页面管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div>
        <el-button
          :type="isColor == 1 ? 'success' : ''"
          class="btnColor"
          @click="changePage(1)"
          >分类管理</el-button
        >
        <el-button :type="isColor == 2 ? 'success' : ''" @click="changePage(2)"
          >Banner管理</el-button
        >
      </div>
      <div v-if="isPage === 1" class="isPageDiv">
        <div class="btnDIVfenlei">
          <el-button type="success" @click="addCategory()">添加分类</el-button>
        </div>
        <div class="tableDIV">
          <el-table :data="tableData" border>
            <el-table-column
              label="序号"
              type="index"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column label="商品分类" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.categoryName"
                  placeholder="请输入商品分类名"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="编辑排序" width="120" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.order"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="图标上传" width="120">
              <template slot-scope="scope">
                <el-upload
                  v-model="scope.row.icon"
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                >
                  <el-button>点击上传</el-button>
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template>
                <el-button class="el-icon-edit" type="primary">保存</el-button>
                <el-button class="el-icon-delete" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-if="isPage === 2" class="isPageDiv">
        <div class="btnDIVfenlei">
          <el-button type="success" @click="addCategory()"
            >添加Banner</el-button
          >
        </div>
        <div class="tableDIV">
          <el-table :data="BannerTable" border>
            <el-table-column
              label="序号"
              type="index"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column label="Banner展示" align="center">
              <template slot-scope="scope">
                <div class="bannerDiv">
                  <el-upload
                    v-model="scope.row.Banner"
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                  >
                    <el-button>点击上传</el-button>
                  </el-upload>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="编辑排序" width="120" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.order"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="商品链接" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.lianjie"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template>
                <el-button class="el-icon-edit" type="primary">保存</el-button>
                <el-button class="el-icon-delete" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isColor: 1,
      isPage: 1,
      tableObject: {
        categoryName: "",
        order: "1",
        icon: ""
      },
      tableData: [
        {
          categoryName: "",
          order: "1",
          icon: ""
        },
        {
          categoryName: "",
          order: "2",
          icon: ""
        },
        {
          categoryName: "",
          order: "3",
          icon: ""
        },
        {
          categoryName: "",
          order: "4",
          icon: ""
        },
        {
          categoryName: "",
          order: "5",
          icon: ""
        },
        {
          categoryName: "",
          order: "6",
          icon: ""
        },
        {
          categoryName: "",
          order: "7",
          icon: " "
        }
      ],
      BannerTable: [
        {
          Banner: "",
          order: "1",
          lianjie: ""
        },
        {
          Banner: "",
          order: "2",
          lianjie: ""
        }
      ]
    };
  },
  created() {},
  methods: {
    addCategory() {
      this.tableData.push(this.tableObject);
    },
    changePage(n) {
      this.isPage = n;
      this.isColor = n;
    }
  }
};
</script>

<style lang="scss" scoped>
.tableDIV {
  margin: 20px 0 0 0;
}
.isPageDiv {
  margin: 20px 20px 0 0px;
  .btnDIVfenlei {
    display: flex;
    justify-content: flex-end;
  }
}
.bannerDiv {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-pagination {
  margin: 60px 30%;
}
</style>
